<template>
	<view class="content">
		<view class="top">
			<view class="top-left">
				<view class="top-left-txt">

					<text class="day">
						{{day}}
					</text>
					<text class="month">{{month}}</text>

				</view>

				<view class="top-left-left">
					{{hour}}
				</view>
			</view>

			<view class="top-right" @click="gotoLogin">
				<image class="touxiang" src="../../static/touxiang.jpg" mode=""></image>
			</view>

		</view>

		<view class="swiper-box">

			<swiper class="swiper" :indicator-dots="true" indicator-color="#ccc" indicator-active-color="#ffffff"
				:autoplay="true" :interval="3000" :circular="true">
				<swiper-item v-for="(item,index) in contentData.banner" :key="index" @click="gotoDetail(item.id)">
					<view>
						<image class="img-auto" :src="item.image" mode="widthFix"></image>
						<!-- <view class="position-content-top"></view> -->
						<view class="position-content">
							<view class="position-title">
								{{item.title}}
							</view>
							<view class="position-author">
								{{item.hint}}
							</view>
						</view>

					</view>
				</swiper-item>

			</swiper>

		</view>

		<!-- 骨架屏 -->
		<view class="skeleton " v-if="contentData.listdata.length <= 0">
			<view class="skeleton-first "></view>
			<view class="skeleton-second "></view>
			<view class="skeleton-second "></view>
			<view class="skeleton-second "></view>
			<view class="skeleton-second "></view>
			<view class="skeleton-first "></view>
		</view>
		<!-- 列表 -->
		<view class="project" v-else>
			
		<view class="content-list"  v-for="(v1,i1) in contentData.listdata" :key="v1.id">
			<view class="date" v-if="i1 !== 0">
				<view class="date-time">
					{{getMonthAndDay(v1.date,"{1}月{2}日")}}
				</view>
				<view class="date-line"></view>
			</view>
			<view v-for="(v2,i2) in v1.stories" @click="gotoDetail(v2.id)">



				<view class="list-item">
					<view class="item-left">
						<view class="item-text">
							{{v2.title}}
						</view>
						<view class="item-author">
							{{v2.hint}}
						</view>
					</view>

					<view class="item-right">
						<image class="item-img" :src="v2.images[0]" mode=""></image>
					</view>
				</view>
			</view>


		</view>
		</view>
		<view v-show="contentData.listdata.length !== 0" class="loadingmore">
			<uni-load-more status="loading" iconType="circle" :iconSize="24" :showIcon="true" color="skyblue">
			</uni-load-more>
		</view>
	</view>
</template>

<script>
	import {
		formatTime
	} from "../../utils/date.js"
	export default {
		data() {
			return {
				title: 'Hello',
				hour:null,
				contentData: {
					time: '',
					listdata: [],
					banner: [],
				},
				day: null,
				month: null,
				date: null

			}
		},

		onLoad() {
			this.getData();
			// const value = uni.getStorageSync('launchFlag');
			// if (value) {
			// 	// 如何已经有，直接去home首页
			// 	uni.switchTab({
			// 		url: '/pages/index/home'
			// 	});
			// } else {
			// 	// 没有值，跳到引导页，并存储，下次打开就不会进去引导页
			// 	uni.setStorage({
			// 		key: 'launchFlag',
			// 		data: true
			// 	});
			// 	uni.redirectTo({
			// 		url: '/pages/index/guide'
			// 	});
			// }
			let time = new Date().toLocaleString('zh-CN', {
				hour12: false
			});
			// console.log(time);
			let arr = []
			if (/^\d{8}$/.test(time)) {
				let [, $1, $2, $3] = /^(\d{4})(\d{2})(\d{2})$/.exec(time);
				arr.push($1, $2, $3)
			} else {
				arr = time.match(/\d+/g);
			}
			let area = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
			this.day = arr[2];
			this.month = area[arr[1] - 1]
			let d = new Date();
			let hour= d.getHours();//得到小时数
			// this.hour = hour;
			if(hour>=6&&hour<12){
				this.hour = "早上好"
			}else if(hour>=12&&hour<14){
				this.hour = "中午好"
			}else if(hour>=14&&hour<19){
				this.hour = "下午好"
			}else if(hour>=19&&hour<24){
				this.hour = "晚上好"
			}else{
				this.hour = "早点休息"
			}
			// console.log(hour)
		},

		onReachBottom() {
			this.getList(this.contentData.listdata[this.contentData.listdata.length - 1].date)
		},
		methods: {
			getData() {
				uni.request({
					url: "https://apis.netstart.cn/zhihudaily/stories/latest",
					success: res => {
						// console.log(res.data)
						//做冻结 ==>0: {image_hue: '0xb38462', hint: '作者 / 锦曦日', url: 'https://daily.zhihu.com/story/9748184', imag
						//不做冻结 ==>0: {…}1: {…}.
						// this.listdata = res.data.top_stories;

						this.contentData.banner = Object.freeze(res.data.top_stories);
						this.contentData.listdata.push({
							date: res.data.date,
							stories: res.data.stories
						})
						// console.log(res.data)

					}
				})
			},
			getMonthAndDay(time, template) {
				if (typeof time !== 'string') {
					time = new Date().toLocaleString('zh-CN', {
						hour12: false
					});
				}
				if (typeof template !== "string") {
					template = "{0}年{1}月{2}日 {3}：{4}：{5}"
				}

				let arr = [];
				if (/^\d{8}$/.test(time)) {
					let [, $1, $2, $3] = /^(\d{4})(\d{2})(\d{2})$/.exec(time);
					arr.push($1, $2, $3)
				} else {
					arr = time.match(/\d+/g);
				}
				return template.replace(/\{(\d+)\}/g, (_, $1) => {
					let item = arr[$1] || "00";
					// if(item.length <2 ) item = "0" + item;
					return item;
					// console.log(item)
				})
			},

			getList(date) {
				uni.request({
					url: `https://apis.netstart.cn/zhihudaily/stories/before/${date}`,
					success: res => {
						this.contentData.listdata.push({
							date: res.data.date,
							stories: res.data.stories
						})
						// console.log("数组",this.contentData.listdata)

					}
				})
			},
			gotoDetail(id) {
				uni.navigateTo({
					// url: `../home/detail?id=${id}`
					url: `../home/contentdetail?id=${id}`
				})
				let arr;
				let localIdData = uni.getStorage({
					key: 'detailId',
					success: function(res) {
						// console.log(res.data)
						return arr = res.data
					}
				});
				if (!arr) {
					arr = []
				} else {
					arr = arr
				}
				let time = new Date().toLocaleString('zh-CN', {
					hour12: false
				});
				arr.unshift({
					contentid:id,
					time:time
				});
				//删除arr中的重复对象
				var newArr= [];
				var arrId = [];
				for(var item of arr){
				    if(arrId.indexOf(item['contentid']) == -1){
				        arrId.push(item['contentid']);
				        newArr.push(item);
				    }
				}
				// console.log(arr)
				// console.log(newArr);
				uni.setStorage({
					key: "detailId",
					data: newArr,
					success: function() {
						// console.log("存储成功")
						
					}
				})

			},
			gotoLogin() {
				let codekey = localStorage.getItem("codeyes");
				if (codekey) {
					uni.navigateTo({
						url: `../mine/mine`
					})
					return
				}
				uni.navigateTo({
					url: `../login/login`
				})
			}
		},


	}
</script>

<style lang="less">
	page{
		// background-color: #000000;
	}
	.top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
		position: fixed;
		width: 100%;
		z-index: 999;
		top: 0;
		left: 0;

		.top-left {
			display: flex;
			padding-left: 20rpx;
			padding-right: 20rpx;

			.top-left-txt {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.day {
					text-align: center;
				}

				.month {
					text-align: center;
				}

				:after {
					content: '';
					width: 1px;
					background-color: #C0C0C0;
					height: 65rpx;
					position: absolute;
					left: 80rpx;
					top: 10rpx;
				}
			}
		}

		.touxiang {
			width: 64rpx;
			height: 64rpx;
			display: block;
			border-radius: 50%;
			margin-right: 20rpx;
			// padding-right: 30rpx;
			// padding-top: 10rpx;
		}
	}

	.day {
		font-size: 36rpx;
	}

	.month {
		font-size: 24rpx;
	}

	.top-left-left {
		text-align: center;
		margin-left: 40rpx;
		line-height: 84rpx;
		font-size: 40rpx;
	}

	.img-auto {
		width: 100%;
		display: block;
		height: 100%;
	}

	.uni-swiper-item {
		overflow: auto;
	}

	.swiper {
		padding-top: 84rpx;
		height: 56.21vh;
		background-color: #C8C7CC;
	}

	.position-title {
		font-size: 40rpx;
		max-height: 100rpx;
		overflow: hidden;
		max-width: 700rpx;

	}

	.position-content {
		position: absolute;
		padding-left: 10px;
		top: 600rpx;
		width: 100%;
		height: 150rpx;
		background: rgba(0, 0, 0, 0.3);
		background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
		color: #FFFFFF;
	}

	.position-author {
		font-size: 26rpx;
	}

	.position-content-top {
		position: absolute;
		background: rgba(0, 0, 0, 0.3);
		background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
		height: 100%;
		width: 100%;
		top: 0;
	}

	/deep/.uni-swiper-dots-horizontal {
		left: 85%;
		height: 10rpx;
	}

	/deep/.uni-swiper-dot {
		width: 10rpx;
		height: 10rpx;
	}

	.item-img {
		width: 150rpx;
		height: 150rpx;
		margin-top: 6rpx;
	}

	// /deep/.project:first-child {
	// 	 margin-top: 50rpx; 
	// 	 background-color: red;
	// }

	.list-item {
		display: flex;
		padding: 11rpx 0rpx;
	}


	.item-left {
		width: 540rpx;
		padding-left: 20rpx;
	}

	.item-text {
		font-size: 35rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.item-author {
		color: #999;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.item-right {
		margin-left: 18rpx;
	}

	/deep/.uni-swiper-dot-active {
		width: 30rpx;
		border-radius: 6rpx;
	}

	//骨架屏的样式
	.skeleton {
		// margin-top: 60rpx;
		padding: 10rpx 30rpx;

		.skeleton-first {
			width: 50%;
			height: 30rpx;
			background: rgb(242, 243, 245);
			margin-top: 45rpx;
		}

		.skeleton-second {
			width: 100%;
			height: 30rpx;
			background: rgb(242, 243, 245);
			margin-top: 45rpx;
		}
	}

	.date {
		color: rgba(0, 0, 0, 0.3);
		font-size: 24rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 0px 10rpx 20rpx;

		.date-time {
			letter-spacing: 4rpx;
			width: 130rpx;
		}

		.date-line {
			height: 1rpx;
			width: 580rpx;
			background-color: rgba(0, 0, 0, 0.2);
			margin-left: 20rpx;

		}
	}

	.loadingmore {
		background-color: #f4f4f4;
	}
</style>
